<template>
	<view>
		<view class="tab-box">
			<view class="left-box">
				<text :class="activeMarketId == item.id ? 'active' : ''" v-for="item in typeList" @click="getCurrencyBalanceFn(item.id)">{{item.name}}</text>
				<text @click="goPage('/pages/my/community')">{{$t('my.community')}}</text>
			</view>
			<view class="right-box">
				<!-- <image src="../../static/img/my/t.png" style="width: 30rpx; height: 30rpx;"></image> -->
			</view>
		</view>
		<view class="total-assets">
			<view class="title-box">
				{{$t('my.totalAssets')}}
				<!-- <image src="../../static/img/my/eye-hide.png" style="width: 36rpx; height: 20rpx;margin-left: 10rpx;"></image> -->
			</view>
			<!-- <view class="number-box" @click="show = true"> -->
			<view class="number-box" >
				<text>{{balance.balance || '0'}}</text>
				{{balance.currencyCode}}
				<!-- <image src="../../static/img/my/s.png" style="width: 16rpx;height: 12rpx;"></image> -->
			</view>
			<view class="rmb-box">
				≈￥{{balance.cnyBalance || '0'}}
			</view>
			<view class="btn-box">
				<view class="recharge" @click="goPage('/pages/my/recharge')">
					{{$t('my.recharge')}}
				</view>
				<view @click="goPage('/pages/my/withdraw')">
					{{$t('my.withdraw')}}
				</view>
				<view @click="goPage('/pages/my/transfer')">
					{{$t('my.transfer')}}
				</view>
			</view>
		</view>

		<view class="list-title-box">
			{{$t('my.currency')}}
		</view>
		<view class="list-box">
			<view class="item" v-for="item in columns[0]" @click="goPage('/pages/my/currency?marketId=' + activeMarketId + '&currencyCode=' + item.currencyCode)">
				<view class="logo-box">
					<image :src="`../../static/img/my/${item.currencyCode}.png`" style="width: 40rpx; height: 40rpx;margin-right: 10rpx;"></image>
					{{item.currencyCode}}<br />
					<text>{{$t('trade.available')}}</text><br />
					<text>{{$t('my.freeze')}}</text>
				</view>
				<view>
					<text style="font-size: 32rpx;">{{item.sumBalance  || '0'}}</text> <text style="color: #1f1f1f80;">{{item.currencyCode}}</text><br />
					<text>{{item.availableBalance || '0'}}</text><br />
					<text>{{item.frozenBalance || '0'}}</text>
				</view>
			</view>
		</view>
		
		<up-picker :show="show" :columns="columns" keyName="currencyCode" closeOnClickOverlay @close="show = false" @cancel="show = false" @confirm="confirm"></up-picker>

		<view class="bottom-box"></view>
		<tabbarVue :current="4"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import {
		getUserInfo,
		getCurrencyBalance,
		getMarket
	} from '@/common/api/common.js'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	const userInfo = ref({})
	const balance = ref({})
	const typeList = ref([])
	const activeMarketId = ref(1)
	const show = ref(false);
	const columns = ref([[]]);

	const getUserInfoFn = async () => {
		const res = await getUserInfo({
			address: uni.getStorageSync('address') || ''
		})
		if (res.status == 0) {
			userInfo.value = res.result.member
		} else {
			uni.$u.toast(res.message)
		}
	}

	const getCurrencyBalanceFn = async (marketId) => {
		activeMarketId.value = marketId 
		const res = await getCurrencyBalance({
			marketId
		})
		if(res.status == 0){
			res.result.memberAccount.map((item,index) => {
				item.id = index + 1
			})
			balance.value = res.result
			columns.value[0] = res.result.memberAccount
		}
	}
	
	const getMarketFn = async () => {
		const res = await getMarket()
		if(res.status == 0){
			typeList.value = res.result
		}
	}
	
	const confirm = (e) => {
	  
	  show.value = false;
	  if(e.value[0].currencyCode == 'XTTA') {
		  uni.$u.toast(t('notYetOpen'))
		  return
	  }
	  balance.value = e.value[0]
	};
	

	const goPage = url => {
		uni.navigateTo({
			url: url
		})
	}

	onLoad(() => {

	})
	onShow(() => {
		getMarketFn()
		getUserInfoFn()
		getCurrencyBalanceFn(activeMarketId.value)
	})
</script>

<style lang="scss" scoped>
	.tab-box {
		width: calc(100% - 80rpx);
		margin: 40rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left-box {
			text {
				margin-right: 40rpx;
				color: #1f1f1f80;
			}

			.active {
				color: #1f1f1f;
			}
		}

		.right-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.total-assets {
		width: calc(100vw - 80rpx);
		margin: 40rpx auto 0;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background: #f5f5f5;
		border-radius: 16rpx;

		.title-box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: bold;
			font-size: 30rpx;
			color: #1F1F1F;
		}

		.number-box {
			margin-top: 40rpx;

			text {
				font-weight: bold;
				font-size: 60rpx;
				color: #1F1F1F;
			}
		}

		.rmb-box {
			color: #1f1f1f80;
			padding-top: 6rpx;
		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			view {
				width: calc(33.33% - 10rpx);
				height: 70rpx;
				background-color: #ffffff;
				text-align: center;
				line-height: 70rpx;
				border-radius: 10rpx;
			}

			.recharge {
				background-color: #eb9e1f;
				color: #ffffff;
			}
		}
	}

	.list-title-box {
		font-weight: bold;
		font-size: 30rpx;
		color: #1F1F1F;
		padding: 40rpx 40rpx 20rpx;
		box-sizing: border-box;
	}

	.list-box {
		padding: 0 40rpx;

		.item {
			width: 100%;
			padding: 30rpx 40rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			background: #f5f5f5;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;

			.logo-box {
				// display: flex;
				align-items: flex-start;
				font-size: 32rpx;
				text {
					font-size: 24rpx;
					color: #1f1f1f80;
				}
			}

			view:last-child {
				text-align: right;
				font-size: 32rpx;

				text {
					font-size: 24rpx;
					// color: #1f1f1f80;
				}
			}
		}
	}
</style>